<template>
  <div>
    <div v-bind:class="isRed?'red':'green'">单个class</div>
    <div :class="{'red':false,'big':true}">多个class</div>
    复杂情况，通过遍历，根据当前对象的成绩，匹配出成绩和样式的清单列表，用成绩做key，
    去对象的value，返回最终的字符串做样式名
    <ul>
      <li v-for="stu in stus"
          :key="stu"
          :class="{'A':'red','B':'green'}[stu.score]">
        {{stu.name}}
      </li>
    </ul>

    <button v-on:click="isRed=!isRed">点我变大</button>
    <button v-on:click="change()">点我变大</button>
    <button @click="change">点我变大</button>
  </div>
</template>

<script>
// class 取一个 返回一个字符串
// 取多个  返回一个对象
// 一个学生列表  每个人都有成绩AB，根据当前学生的成绩匹配显示不同的颜色
export default {
  data () {
    return {
      isRed: false,
      stus: [
        {
          name: 'jack',
          score: 'A'
        },
        {
          name: 'lose',
          score: 'B'
        }
      ]
    }
  },
  components: {

  },
  // 声明函数
  methods: {
    // 包含多个函数名做key，函数体做value
    change () {
      // 在script中能使用的对象，基本template中也能使用
      // 但是在script中要添加this，template中不需要this
      this.isRed = !this.isRed
      this.stus.push({
        name: 'mick', score: 'A'
      })
    }
  }
}
</script>

<style>
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.big {
  font-size: 30px;
}
</style>
